<template>
	<div class="">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-copy"></i> 编辑管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<!-- 新增编辑 -->
			<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="编辑电话" prop="tel" :rules="[
			      { required: true, message: '电话不能为空'},
			      { type: 'number', message: '电话必须为数字值'}
			    ]">
					<el-input type="tel" v-model.number="numberValidateForm.tel" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('numberValidateForm')">新增编辑</el-button>
					<el-button @click="resetForm('numberValidateForm')">重置</el-button>
				</el-form-item>
			</el-form>
			<!-- 查询所有编辑 -->
			<template>
				<el-table :data="Editors.filter(data => !search || data.editorTel.toLowerCase().includes(search.toLowerCase()))"
				 style="width: 100%">
					<el-table-column label="编辑ID" prop="editorId">
					</el-table-column>
					<el-table-column label="电话" prop="editorTel">
					</el-table-column>
					<el-table-column label="状态" prop="status">
					</el-table-column>
					<el-table-column align="right">
						<template slot="header" slot-scope="scope">
							<el-input v-model="search" size="mini" placeholder="输入编辑电话搜索" />
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				numberValidateForm: {
					tel: ''
				},
				Editors: [],
				search: ''
			};
		},
		methods: {
			submitForm(formName) {
				var _this = this;
				_this.$refs[formName].validate((valid) => {
					if (valid) {
						$.ajax({
							url: "http://localhost/manager/add",
							data: {
								"tel": _this.numberValidateForm.tel
							},
							type: "post",
							// contentType: "application/json;charset=utf-8",
							success: function(data) {
								if (data.data == '新增成功') {
									alert(data.data);
									_this.select();
								}
								if (data.data == '该手机号已存在') {
									alert(data.data);
									_this.select();
								}
							}
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			select: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/manager/alleditor",
					type: "get",
					success: function(data) {
						_this.Editors = data.data;
					}
				});
			}
		},
		created() {
			this.select();
		}
	}
</script>

<style>
</style>
